import arrowIcon from "@/assets/images/icon_jump.png";
import CheckBox from "@/components/CheckBox";
import ProductConfig from '@/config/product';
import useEvent from "@/hooks/useEvent";
import { GDynamicValue, GStyleSheet } from '@/utils/DarkMode';
import { Image, View } from '@tarojs/components';
import I18n from "i18n-js";
import React, { useMemo } from 'react';

const dstyles = GStyleSheet.create({
  device: {
    // margin: '0 32rpx',
    padding: '30rpx 0 20rpx',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  icon: {
    width: '60rpx',
    height: '60rpx',
    marginRight: '20rpx',
  },
  content: {
    flex: 1,
  },
  top: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '14rpx',
    height: '44rpx',
  },
  name: {
    flex: 1,
    color: '#000000',
    fontSize: '32rpx',
  },
  arrowIcon: {
    tintColor: new GDynamicValue("#888", "#ccc"),
    marginLeft: 10,
    width: 16,
    height: 16,
  },
  extra: {
    fontSize: '24rpx',
    color: '#878787',
    lineHeight: '34rpx'
  },
  checkbox: {
    width: 18,
    height: 18,
  }
});

interface Props {
  data: IDevice;
  numberOfUsers: number | null;
  isSelectMode: boolean;
  selected: boolean;
  onPress(d: IDevice): void;
}


const Device: React.FC<Props> = React.memo(({
  data,
  numberOfUsers,
  isSelectMode,
  selected,
  onPress,
}) => {

  const productInfo = useMemo(() => {
    return ProductConfig.getItemForPk(data.productKey)
  }, [data.productKey]);

  const handlePress = useEvent(() => onPress(data))

  if (!productInfo) {
    return null;
  }

  const styles = dstyles.style;

  return (
    <View style={styles.device} onClick={handlePress}>
      <Image src={productInfo.icon} style={styles.icon} />
      <View style={styles.content}>
        <View style={styles.top}>
          <View style={styles.name} className='ellipsisText'>{data.name}</View>
          {
            isSelectMode ? (
              <CheckBox checked={selected} style={styles.checkbox} />
            ) : (
              <Image src={arrowIcon} style={styles.arrowIcon} />
            )
          }
        </View>
        {numberOfUsers != null && (
          <View style={styles.extra}>
            {I18n.t('NUMBER_OF_SHARES', { num: numberOfUsers })}
          </View>
        )}
      </View>
    </View>
  );
});

export default Device;